const path = require('path')
const VueLoaderPlugin = require('vue-loader/lib/plugin')
// 导入生成预览页面的插件html-webpack-plugin
const HtmlWebpackPlugin = require('html-webpack-plugin')

const htmlPlugin = new HtmlWebpackPlugin({  // 创建插件的实例对象
    template: './src/idnex.html',   // 指定要用到的模板文件
    filename: 'index.html',  // 指定生成的文件的名称，该文件存在于内存中，在目录中公布显示
    chunks: ['main', 'index'],
    hash: true,
    inject: true
})

module.exports = {
    entry: path.join(__dirname, './src/index.js'), //打包入口文件的路径
    output: {
        path: path.join(__dirname, "./dist"), //输出文件的存放路径
        filename: 'bundle.js' 	 //输出文件的名称
    },
    mode: 'development', // mode 用来指定构建模式 
    // plugin数组是webpack打包期间会用到的一些插件列表
    plugins: [htmlPlugin, new VueLoaderPlugin()],
    module: {
        rules: [
            {
                test: /\.jpg|png|gif|bmp|ttf|eot|svg|woff|woff2$/,
                use: 'url-loader?limit=20000'
            },
            { test: /\.less$/, use: ['style-loader', 'css-loader', 'less-loader'] },
            { test: /\.css$/, use: ['style-loader', 'css-loader'] },
            { test: /\.scss$/, use: ['style-loader', 'css-loader', 'sass-loader'] },
            { test: /\.vue$/, loader: 'vue-loader' },
        ]
    }
}